import React from 'react'
import {NavBar, Card,Icon, Button, Toast,Modal,List, WhiteSpace} from 'antd-mobile'
import axios from '../../axios/index'
import './index.less'
const alert = Modal.alert;
const Item = List.Item;
const Brief = Item.Brief;
export default class Equity extends React.Component{

    state={
        vasUserInfo:[],
        vasList:[]
    }
    componentDidMount(){
        this.getVasInfo();
        this.getVasList();
        // 
        
    }
    getVasList=()=>{
        axios.ajax({
            url:'/api/v1/vas/user/service',
            method:'get',
            data:{}
        }).then((res)=>{
            if(res.code===0){
                if(res.data){
                    this.setState({
                        vasList:res.data
                    });
                }
            }
        });
    }
    getVasInfo=()=>{
        axios.ajax({
            url:'/api/v1/vas/user',
            method:'get',
            data:{}
        }).then((res)=>{
            if(res.code===0){
                if(res.data){
                    this.setState({
                        vasUserInfo:res.data
                    });
                }
            }
        });
    }
    unBind=()=>{
        // Toast.info('你准备解绑？');
        alert('解除绑定', `您已绑定车辆${this.state.vasUserInfo.carNo},解除绑定后你可以重新绑定其他车辆`, [
            { text: '取消', onPress: () => console.log('cancel'), style: 'default' },
            { text: '确定', onPress: () =>{
                Toast.info('您已解除绑定');
                    axios.ajax({
                        url:'/api/v1/vas/user/unbind',
                        method:'get',
                        data:{}
                    }).then((res)=>{
                        if(res.code===0){
                            if(res.data){
                                this.props.history.push('/main');
                            }
                        }
                    });
                } 
            },
          ]);
    }
    render(){
        return(
            <div>
                <NavBar
                    mode="light"
                    leftContent="返回"
                    icon={<Icon type="left" />}
                    onLeftClick={() => {
                        const {history}=this.props;
                        history.push({pathname:'/mine'})
                }}
                    rightContent={[
                        <Icon key="1" type="ellipsis" />,
                    ]}
                >我的权益</NavBar>
                <Card full>
                    <Card.Header
                        title={
                            <div>
                                <span style={{fontSize:'16px',color:'#101010'}}>{this.state.vasUserInfo.name}</span>
                                <div>                                    
                                    <span style={{fontSize:'12px', color:'#666666'}}>绑定车辆：{this.state.vasUserInfo.carNo}</span>                                    
                                </div>
                            </div>
                        }                    
                        thumb={require(`../../resource/images/logo.png`)}
                        extra={                     
                            <Button className='btn_unbind' type='ghost' size='small' onClick={this.unBind}>解绑</Button>
                        }
                    />
                </Card>
                <WhiteSpace/>
                <List className='equity_list'>
                    {
                        this.state.vasList.map(val=>(
                            <Item key={val.id}
                            thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
                            extra={<span style={{color:'#FF9800',fontSize:'18px'}}>{val.quantity}次</span>}
                            onClick={() => {}}
                            >
                            <span style={{fontSize:'14px'}}>{val.service.name}</span>
                            </Item>
                        ))
                    }
                </List>
            </div>
        );
    }
}